<template>
  <div>
    <el-row style="margin-top: 20px">
      <el-col :span="2">
        <div style="font-size: 14px;color: #a5a5a5">通知列表</div>
      </el-col>
    </el-row>
    <div v-for="(item,index) in noticeList" :key="index">
      <el-row style="margin-top: 10px">
        <el-card shadow="hover" style="text-align: left" @click.native="showNotice(item)">
          <el-row>
            <el-col :span="1" style="margin-left: 15px">
              <el-avatar src="https://www.ketangpai.com/images/ic_bulletin.svg"></el-avatar>
            </el-col>
            <el-col :span="11" style="margin-left: 20px">
              <el-row>
                <el-col :span="6">
                  <span style="font-size: 16px">{{ item.noticeTitle }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" style="margin-top: 10px">
                  <span style="font-size: 12px;color: #a5a5a5">发布时间 : {{ item.noticeStartTime }}</span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
    </div>

    <el-dialog
      :title="noticeMsg.noticeTitle"
      :visible.sync="noticeDialog"
      width="30%">
      <el-row>
        <el-col>
          <span style="text-align: left" v-html="noticeMsg.noticeContent"></span>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StudentNotice',
  data () {
    return {
      courseId: undefined,
      noticeList: [],
      noticeMsg: {},
      noticeDialog: false
    }
  },
  methods: {
    showNotice (notice) {
      this.noticeMsg = notice
      this.noticeDialog = true
      console.log(this.noticeMsg)
    },
    init () {
      this.$http.get('/api/notice/listForStudent/' + this.courseId).then(res => {
        this.noticeList = res.data.result
      })
    },
  },
  created () {
    this.courseId = this.$store.state.course.courseId

    this.init()
  }
}
</script>

<style scoped>

</style>
